<template>
  <el-form ref="EContactForm" :model="eContact" :rules="eContactRules" label-width="120px" class="demo-ruleForm"
    size="default" status-icon>
    <p style="font-size: 24px;
    margin-bottom: 30px;
    padding-top: 10px;
    padding-left: 20px;">联系方式及地址</p>
    <el-form-item label="联系人姓名" prop="contactName" style="margin-top: 20px;">
      <el-input v-model="eContact.contactName" style="width: 300px;"  placeholder="请输入联系人姓名"/>
    </el-form-item>
    <el-form-item label="联系人电话" prop="contactPhone" style="margin-top: 20px;">
      <el-input v-model="eContact.contactPhone" style="width: 300px;" placeholder="请输入联系人电话" />
    </el-form-item>
    <el-form-item label="联系人邮箱" prop="contactEmail" style="margin-top: 20px;">
      <el-input v-model="eContact.contactEmail" style="width: 300px;" placeholder="请输入联系人邮箱"/>
    </el-form-item>
    <el-form-item label="联系地址" prop="contactAddress" style="margin-top: 20px;">
      <el-input v-model="eContact.contactAddress" style="width: 300px;" placeholder="请输入联系地址" />
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="saveInfo(EContactForm)">保存</el-button>
      <el-button @click="cancelEdit(EContactForm)">取消</el-button>
    </el-form-item>
  </el-form>
</template>


<script lang='ts' setup>
import { ref, onMounted, reactive, getCurrentInstance } from "vue"
import { useStore } from "vuex"
import type { FormInstance, FormRules } from 'element-plus'
import { eContact, eContactRules } from "@/utills/enterpriseValidators"
import { elmessage, data } from "@/hook/hook"

const store = useStore()
// @ts-ignore
const { proxy } = getCurrentInstance() // 1.获取proxy实例

const EContactForm = ref<FormInstance>()

onMounted(() => {
  eContact.contactName = store.state.enterpriseState.EContact.contactName
  eContact.contactPhone = store.state.enterpriseState.EContact.contactPhone
  eContact.contactEmail = store.state.enterpriseState.EContact.contactEmail
  eContact.contactAddress = store.state.enterpriseState.EContact.contactAddress
})


// 提交按钮
const saveInfo = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 更改公司简介
      store.commit("editEContact")
      console.log(eContact);
      store.commit("upEContact", eContact)



    } else {
      console.log('error submit!', fields)
    }

  })

}
// 取消按钮
function cancelEdit(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.resetFields()
  store.commit("editEContact")
}




</script>
<style scoped>
.demo-ruleForm {
  height: 350px;
}

.demo-ruleForm:hover {
  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}
</style>